<template>
	<view class="container">
		<view class="card">
			<uni-forms ref="baseForm" :modelValue="form" label-position="top">
				<uni-forms-item label="车辆总价" required>
					<uni-easyinput type="digit" v-model.trim="form.totalPrice" placeholder="请输入车辆总价" />
				</uni-forms-item>
				<uni-forms-item label="首付比例" required>
					<uni-data-select v-model="form.payRatio" :localdata="payRatioList" placeholder="请选择首付比例"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="贷款期数" required>
					<uni-data-select v-model="form.payNum" :localdata="payNumList" placeholder="请选择贷款期数"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="年利率" required>
					<uni-easyinput type="digit" v-model.trim="form.yearRate" placeholder="请输入年利率" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="startComputed">开始计算</button>
		</view>
		
		<view class="result" v-if="showResult">
			<view class="title">贷款计算结果</view>
			<view class="result-item">
			  <text class="label">车辆总价</text>
			  <view class="f fac">
				<text class="value">{{ formatNumber(parseFloat(form.totalPrice)) }}</text>
				<text>元</text>
			  </view>
			</view>
			<view class="result-item">
			  <text class="label">首付金额</text>
			  <view class="f fac">
				<text class="value">{{ formatNumber(result.downPayment) }}</text>
				<text>元</text>
			  </view>
			</view>
			<view class="result-item">
			  <text class="label">贷款金额</text>
			  <view class="f fac">
				<text class="value">{{ formatNumber(result.loanAmount) }}</text>
				<text>元</text>
			  </view>
			</view>
			<view class="result-item">
			  <text class="label">月供金额</text>
			  <view class="f fac">
				<text class="value">{{ formatNumber(result.monthlyPayment) }}</text>
				<text>元/月</text>
			  </view>
			</view>
			<view class="result-item">
			  <text class="label">贷款期数</text>
			  <view class="f fac">
				<text class="value">{{ result.term }}</text>
				<text>期</text>
			  </view>
			</view>
			<view class="result-item">
			  <text class="label">支付利息</text>
			  <view class="f fac">
				<text class="value">{{ formatNumber(result.totalInterest) }}</text>
				<text>元</text>
			  </view>
			</view>
			<view class="result-item total">
			  <text class="label">还款总额</text>
			  <view class="f fac">
				<text class="value">{{ formatNumber(result.totalPayment) }}</text>
				<text>元</text>
			  </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';

	const form = reactive({
		totalPrice: '',
		payRatio: '',
		payNum: '',
		yearRate: ''
	})
	
	const payNumList = ref([
		{ text: '12期(1年)', value: 12 },
		{ text: '24期(2年)', value: 24 },
		{ text: '36期(3年)', value: 36 },
		{ text: '48期(4年)', value: 48 },
		{ text: '60期(5年)', value: 60 },
	])
	
	const payRatioList = ref([
		{ text: '0%', value: 0 },
		{ text: '20%', value: 0.2 },
		{ text: '30%', value: 0.3 },
		{ text: '40%', value: 0.4 },
		{ text: '50%', value: 0.5 },
		{ text: '60%', value: 0.6 },
		{ text: '80%', value: 0.8 }
	])
	
	const result = reactive({
		downPayment: 0,      // 首付金额
		loanAmount: 0,       // 贷款金额
		monthlyPayment: 0,   // 月供
		totalInterest: 0,    // 总利息
		totalPayment: 0,     // 还款总额
		term: 0              // 贷款期数
	})
	
	const showResult = ref(false)
	
	const formatNumber = (num) => {
		return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
	}
	
	const startComputed = () => {
		for (let key in form) {
			if (form[key] === '') {
				uni.showToast({
					title: '请完善信息',
					icon: 'none',
					mask: true
				})
				return
			}
		}
		// 开始计算
		uni.showLoading({
			mask: true
		})
		
		// 验证数字有效性
		const totalPrice = parseFloat(form.totalPrice)
		const yearRate = parseFloat(form.yearRate)
		
		// 获取选中的值
		const selectedRatio = payRatioList.value.find(item => item.value === form.payRatio)?.value || 0
		const selectedNum = payNumList.value.find(item => item.value === form.payNum)?.value || 0
		
		// 计算首付金额和贷款金额
		result.downPayment = totalPrice * selectedRatio
		result.loanAmount = totalPrice - result.downPayment
		result.term = selectedNum
		
		// 计算月利率
		const monthlyRate = (yearRate / 100) / 12
		
		// 等额本息计算公式：月供 = [贷款本金 × 月利率 × (1+月利率)^还款月数] ÷ [(1+月利率)^还款月数-1]
		const temp = Math.pow(1 + monthlyRate, selectedNum)
		result.monthlyPayment = (result.loanAmount * monthlyRate * temp) / (temp - 1)
		
		// 计算总利息和还款总额
		result.totalPayment = result.monthlyPayment * selectedNum
		result.totalInterest = result.totalPayment - result.loanAmount
		
		// 加载显示
		uni.hideLoading()
		showResult.value = true
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f8f9fa;
		padding: 24rpx;
		height: 100vh;
		.result {
			background-color: #f9fafb;
			border-radius: 24rpx;
			padding: 40rpx;
			color: #6B7280;
			width: 100%;
			.title {
				color: #111827;
			}
			.result-item {
				width: 100%;
				margin-top: 24rpx;
				color: #4B5563;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.value {
					color: #111827;
					font-weight: 600;
					margin-right: 8rpx;
				}
			}
		}
	}
</style>
